<template>
  <div class="faxianthree">
      <div class="tubiaoxiaohe">
          <ul class="tubiaotop">
              <li v-for="(v, i) in arr3" :key="i">
                  <span :class="['iconfont', v.iconl] "></span>
                  <div class="tubiaotext">{{v.text}}</div>
              </li>
               <!-- <li>
                  <span class="iconfont icon-jianshen-pigu-tunbu-meitunbuttocks"></span>
                  <div class="tubiaotext">减脂计划</div>
              </li>
               <li>
                  <span class="iconfont icon-ticao"></span>
                  <div class="tubiaotext">体态评估</div>
              </li>
               <li>
                  <span class="iconfont icon-jiangpaipaiming"></span>
                  <div class="tubiaotext">热门活动</div>
              </li>
               <li>
                  <span class="iconfont icon-yinle"></span>
                  <div class="tubiaotext">音乐助眠</div>
              </li> -->
          </ul>
          <ul class="tubiaotop">
            <li >
                  <span class="iconfont icon-aixin"></span>
                  <div class="tubiaotext">心理测评</div>
              </li>
               <li>
                  <span class="iconfont icon-wodekecheng"></span>
                  <div class="tubiaotext">健身课程</div>
              </li>
               <li>
                  <span class="iconfont icon-fuwu"></span>
                  <div class="tubiaotext">精选服务</div>
              </li>
               <li>
                  <span class="iconfont icon-shipu"></span>
                  <div class="tubiaotext">制定食谱</div>
              </li>
               <li>
                  <span class="iconfont icon-zhishi"></span>
                  <div class="tubiaotext">知识头条</div>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import getlink from "../../apis/getapi"
export default {
    data() {
        return {
            arr3:[],
        }
    },
    mounted() {
        getlink("/data/list/xiaoming").then((ok)=>{
            console.log(ok.data.faxianthree);
            this.arr3 = ok.data.faxianthree;
        })
    }
}
</script>

<style scoped>
    .faxianthree{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 2.2rem;
    }
    .tubiaoxiaohe{
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 1.8rem;
    }
    .tubiaotop{
        display: flex;
        width: 100%;
        height: .9rem;
    }
    .tubiaotop li{
        display: flex;
        flex-direction: column ;
        align-items: center;
        width: 20%;
        height: 100%;
    }
    .tubiaotext{
        text-align: center;
        margin-top: .15rem;
        width: 100%;
        height: .2rem;
        font-size:.14rem;
    }
   .tubiaotop .iconfont{
       margin-top: .1rem;
       font-size: .39rem;
       color: #ec853a;
   }
</style>